<template>
    <div>
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <!--        <span>-->
            <!--            <van-nav-bar title="左右商城">-->

            <!--            </van-nav-bar>-->
            <!--        </span>-->
            <div class="header">
                <div class="headerRadius">
                </div>
            </div>
            <div>
                <van-search
                        v-model="value"
                        :placeholder="searchTxt"
                        input-align="center"
                        @click="goToPath('/search')"
                />
                <van-swipe class="ad1" style="height:150px;margin:0px 10px 0px 10px" :autoplay="5000"
                           indicator-color="white">
                    <van-swipe-item v-for="item in adList">
                        <van-image radius="10px" width="100%" height="100%" :src="item.imgPath"/>
                    </van-swipe-item>
                </van-swipe>

                <span>
                    <van-grid :column-num="5">
                        <van-grid-item v-for="item in menuList">
                            <van-image :src="item.menuIco" @click="goToPath(item.menuPath)"
                                       style="width:70%"></van-image>
                            <span style="font-size:10px;position: relative;top:10px">{{item.menuName}}</span>
                        </van-grid-item>
                    </van-grid>
                </span>
            </div>

            <span>
             <van-swipe class="ad2" style="height:100px;margin: 0px 10px 0px 10px" :autoplay="3000"
                        indicator-color="white">
                <van-swipe-item>
                    <van-image src="https://aecpm.alicdn.com/simba/img/TB1NQJ.OHY1gK0jSZTESutDQVXa.jpg_q50.jpg"
                               style="width: 100%;height: 100%"></van-image>
                </van-swipe-item>
             </van-swipe>
        </span>
            <span>
            <van-cell title="推荐商品">
                <span>查看更多</span>
            </van-cell>
        </span>
            <span>
            <van-card
                    price="8699.00"
                    desc="强大的A13X中央处理器"
                    title="iPad Pro 2020"
                    thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                    @click="goToGoods"
            >
                <template #tags>
                    <van-tag plain type="danger">送6000粉钻</van-tag>
                </template>
                <template #footer>
                    <van-button size="small">立即购买</van-button>
                </template>
            </van-card>
        </span>
        </van-pull-refresh>

    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                count: 0,
                isLoading: false,//刷新状态
                menuList: [],
                searchTxt: "红米K30至尊版",
                adList: []
            }
        }, created() {
            this.getMenuData();
            this.getAdData();
        }, methods: {
            goToGoods() {
                this.$router.push({path: '/goods'});
            }, onRefresh() {
                setTimeout(() => {
                    this.isLoading = false;
                    this.count++;
                }, 1000);
            },
            getMenuData() {
                /**
                 * 获取菜单数据
                 */
                this.$axios("http://127.0.0.1:8075/menu").then(res => {
                    this.menuList = res.data.data;
                    console.log(res)
                })
            },
            goToPath(path) {
                this.$router.push({path: path});
            },
            getAdData() {
                /**
                 * 获取广告数据
                 */
                this.$axios("http://127.0.0.1:8075/advertising").then(res => {
                    console.log(res)
                    this.adList = res.data.data;
                })
            }
        }
    }
</script>

<style scoped>
    .ad1 .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 300px;
        text-align: center;
        background-color: #39a9ed;
    }

    .ad2 {
        color: #fff;
        font-size: 20px;
        line-height: 200px;
        text-align: center;
        background-color: #39a9ed;
    }

    .van-nav-bar {
        background: #c92828;
        font-family: 幼圆;
        font-weight: bolder;
    }

    /deep/ .van-ellipsis {
        color: #ffffff;
    }

    /deep/ .van-swipe__indicator {
        background: #ffffff;
    }

    /deep/ van-swipe__indicator van-swipe__indicator--active {
        background: #cf2e2e;
    }

    /deep/ .van-loading {
        position: relative;
        color: #f23333;
        font-size: 0;
        vertical-align: middle;
    }

    .van-search {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 20px 22px;
        background-color: #d7041c;
    }

    .ad1 .van-swipe-item[data-v-056dbbc0] {
        background-color: #ffffff00;
    }

    .header {
        z-index: -10;
        position: absolute;
        width: 100%;
        height: 10rem;
        overflow: hidden;
    }

    .headerRadius {
        width: 110%;
        left: -5%;
        position: absolute;
        height: 10rem;
        background-color: #d7041c;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 200rem 90rem;
        border-bottom-left-radius: 200rem 90rem;
    }

    /deep/ .van-grid-item__content {
        background-color: #0000;
    }
</style>
